<template>
	
	<video @loadedmetadata="loadedmetadata" class="posifi left999 image" :src="srcAudio" ref="audioId" id="audioId"></video>
	<view class="pb200">
		<view class="mr33 posiab" v-show="false">{{hee}}</view>
		<view class="con">
			<view id="section">
				<image @load="imgload" mode="widthFix" :src="info.rootCard" class="image ra20"></image>
				<view class="flex-ju-b mt50">
					<view @click="voice(info.audioId)" class="flex-a-i size60 bold">
						{{info.root}}
						<image mode="widthFix" src="/static/yuyin.png" class="image flex width46"></image>
					</view>
					<image @click="tapopen" mode="widthFix"
						:src="info.isCollection?'/static/xings.png':'/static/xing.png'" class="image width42"></image>
				</view>
			</view>

			<view class="flex-ju-b mt50 mb30" :style="{marginTop:ispages?wintop+'px':''}" :class="{fixd:ispages}">
				<view @click="tapttype(index)" v-for="(item,index) in ['词根讲解','系列词','词根小说','笔记']">
					<view class="size28 flex-a-i color666" :class="{active:tindex == index}">
						{{item}}
						<image v-if="index==0||index==2" mode="widthFix" src="/static/vip.png" class="image width33">
						</image>
					</view>
					<view class="height30 flex-ju-c">
						<image mode="widthFix" v-if="tindex == index" src="/static/lian.png"
							:class="{mr33:index==0||index==2}" class="image width23"></image>
					</view>
				</view>
			</view>

			<view id="section0">
				<template v-if="info.isUnlock">
					<mp-html @ready="ready" @load="loadss" isclass="1" :content="info.explanation" />
				</template>
				<image v-else mode="widthFix" :src="info.sysParam" class="image ra20"></image>
			</view>

			<view id="section1">

				<view style="border: 1rpx dashed rgba(19,28,37,0.08);" class="mt30 mb30"></view>
				<view class="flex-ju-b mt30">
					<view class="size32 bold">系列词({{info.seriesWordDos.length}})</view>
					<view class="flex-a-i">
						<image @click="tapminimg=true" v-if="info.mindMap" mode="widthFix" src="/static/san.png"
							class="image  width46"></image>
						<image @click="taproots(0)" v-if="rootindex==2" mode="widthFix" src="/static/tian.png"
							class="image ml20 width46"></image>
						<image @click="taproots(1)" v-if="rootindex==0" mode="widthFix" src="/static/hange.png"
							class="image ml20 width46"></image>
						<image @click="taproots(2)" v-if="rootindex==1" mode="widthFix" src="/static/sans.png"
							class="image ml20 width46"></image>
					</view>
				</view>
				<image v-if="tapminimg" mode="widthFix" @click="unreimg" :src="info.mindMap" class="image mt20"></image>
				<swiper v-if="rootindex==0" @change="swchange" previous-margin="100rpx" next-margin="100rpx"
					class="swiper height650 ">
					<swiper-item v-for="(item,h) in info.seriesWordDos" :key="h">
						<view class="flex-ju-c mt20 transition" :class="{scale:sindex==h}">
							<view style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);"
								class="pg15  wh450-600 ra28">
								<view @click="tapatype(item)" class="flex-ju-c">
									<image class="wh440-440 ra20" :src="item.wordCard"></image>
								</view>
								<view class="flex-ju-b">
									<view class="size40 bold mt20 mb10">{{item.word}}</view>
									<image @click="voice(item.audioId)" mode="widthFix" src="/static/yuyin.png"
										class="image width32"></image>
								</view>
								<view class=" one size28 width440 color666 ">
									<text>{{item.paraphrase}}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>

				<template v-if="rootindex==1">
					<view v-for="(item,h) in info.seriesWordDos" :key="h"
						style="box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);" class="flex-ju-b  pg25-20 ra28 mt30">
						<view @click="tapatype(item)" class="flex-a-i flex1">
							<view>
								<image :src="item.wordCard" class="image wh80-80 ra15"></image>
							</view>
							<view class="ml15">

								<view class="size32 bold">{{item.word}}</view>
								<view class="flex-a-i size24  flex-wrap">
									<view class="flex-a-i bgF9F9F9 mt5 pg2-20 ra30 mr20">{{item.paraphrase}}</view>

								</view>
							</view>
						</view>
						<view class="flex-a-i">
							<view @click="voice(item.audioId)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
								<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
							</view>
							<view @click="tapcang(item)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">
								<image mode="widthFix" :src="item.isCollection?'/static/xings.png':'/static/xing.png'"
									class="image width28"></image>
							</view>
						</view>
					</view>
				</template>


				<view v-if="rootindex==2" v-for="(item,p) in info.seriesWordDos" :key="p"
					class="border-tECEDEE mt30 pt30 flex-ju-b">
					<view class="flex1" @click="tapatype(item)">
						<view class="size32 bold">{{item.word}}</view>
						<view class="flex-a-i size24  flex-wrap">
							<view class="flex-a-i bgF9F9F9 mt20 pg2-20 ra30 mr20">{{item.paraphrase}}</view>
						</view>
					</view>
					<view class="flex-a-i">
						<view @click="voice(item.audioId)" class="bgF9F9F9 pg2-20 ra30 height40 flex-ju-c">
							<image mode="widthFix" src="/static/yuyin.png" class="image width28"></image>
						</view>
						<view @click="tapcang(item)" class="bgF9F9F9 pg2-20 ra30 ml20 height40 flex-ju-c">

							<image mode="widthFix" :src="item.isCollection?'/static/xings.png':'/static/xing.png'"
								class="image width28"></image>
						</view>
					</view>
				</view>
			</view>

			<view id="section2">


				<view style="border: 1rpx dashed rgba(19,28,37,0.08);" class="mt30 mb30"></view>
				<view class="flex-ju-b mt50">
					<view class="size32 bold">词根小说</view>
				</view>
				<template v-if="info.isUnlock">
					<view class="mt15">
						<mp-html :content="info.stories"></mp-html>
						<view v-if="info.zstories" class="mt30">({{info.zstories}}</view>
					</view>
					<view class="flex-a-i mt30">
						<image :id="info.storyAudioId" v-if="info.storyAudioId" @click="voice(info.storyAudioId)"
							mode="widthFix" src="/static/aiyuyin.png" class="image width54"></image>
						<view @click="againset" class="colorFD2F55 size24 bgFFEAED flex-ju-c wh138-54 ra16 ml20">重新生成
						</view>
						<!-- <view class=" border898D92 ra10 size24 wh158-52 flex-ju-c ml20">
				 		写作风格
				 		<image mode="widthFix" src="/static/bottoms.png" class="image width22 ml5"></image>
				 	</view> -->
					</view>
				</template>
				<image v-else mode="widthFix" :src="info.sysParam" class="image mt30 ra20"></image>
			</view>

			<view id="section3">

				<view style="border: 1rpx dashed rgba(19,28,37,0.08);" class="mt30 mb30"></view>
				<view class="flex-ju-b mt50">
					<view class="size32 bold">笔记</view>
				</view>

				<view class="bgFFF2F4 pg25-20 ra20 mt30">
					<view class="flex-ju-b border-bECEDEE pb30">
						<view class="size28 bold">我的笔记</view>
						<view @click="tapupimg" class="flex-a-i size24 ra10 colorfff pg7-15 bgFD2F55"
							>
							<image src="/static/xiangji.png" mode="widthFix" class="image width28 flex mr10"></image>
							图片
						</view>
					</view>
					<view class="posire">
						<textarea class="size28 pt20 pb50 width1000" auto-height maxlength="-1" v-model="note"
							placeholder="在这里写下你的笔记" placeholder-style="color:#898D92"></textarea>
						<image mode="widthFix" src="/static/jiao.png" class="image width44 right-20 bottom-25 posiab">
						</image>
						<view class="flex-a-i flex-wrap">
							<view v-for="(item,d) in images" :key="d" class="posire width190 mr20 mb20">
								<image :src="item" class="image wh190-190 ra20"></image>
								<view @click="tapclose(d)" class="wh42-42 ra42 flex-ju-c posiab top10 right10"
									style="background: rgba(19,28,37,0.5);">
									<uni-icons color="#fff" type="closeempty"></uni-icons>
								</view>
							</view>
						</view>
						<view class="flex-ju-c">
							<view @click="tapaddnote" class="flex-ju-c colorfff size28 ra20 bg000 wh200-70">提交</view>
						</view>
					</view>


				</view>
			</view>
			<view class="flex-a-i mt50">
				<view class="size32 bold">精选笔记</view>
				<image mode="widthFix" src="/static/vip.png" class="image width44"></image>
			</view>

			<template v-if="info.isUnlock">

				<view v-for="(item,a) in info.noteInfoDos" :key="a" class="mt30 mb80">
					<view class="flex-ju-b size24 color666 ">
						<view class="flex-a-i">
							<image :src="item.avatarUrl" class="image wh32-32 mr10 flex ra32"></image>
							{{item.nickName}}
						</view>
						<image @click="tapaddcang(item,5)"
							:src="item.isCollection?'/static/xings.png':'/static/xing.png'" mode="widthFix"
							class="image width30"></image>
					</view>
					<view class="hidden">
						<view class="size28 pl10 mt20 " :class="{fith:item.isshow}"
							style="border-left:5rpx solid #FFF2F4;line-height: 23px;">
							{{item.note}}
						</view>
					</view>

					<view v-if="item.isshow" class="flex-ju-b mt10">
						<view></view>
						<view @click="kaizhan(item)" class="colorFD2F55 size24">展开</view>
					</view>
					<view class="flex-a-i flex-wrap">
						<view v-for="(items,da) in item.images" :key="da" class="posire width190 mr20 mt20">
							<image @click="previewimg(item.images,da)" :src="items" class="image wh190-190 ra20">
							</image>
						</view>
					</view>

				</view>
			</template>
			<image v-else mode="widthFix" :src="info.sysParam" class="image mt30 ra20"></image>


		</view>


		<view v-if="atype" class="flex-ju-b mt50 con">
			<view @click="rootp" class="flex1 flex-ju-c height100 ra20 colorfff bg000 mr10">上一个</view>
			<view @click="rootnext" class="width438 flex-ju-c height100 ra20 colorfff bgFD2F55  ml10">下一个</view>
		</view>

		<view v-if="info.isUnlock==0" class="posifi width1000 zindex5 bottom0">
			<view class="center flex-ju-b  pt30 bgfff pl30 pr30" :style="{paddingBottom:bhh+'px'}"
				style="box-shadow: 0rpx -4rpx 30rpx 0rpx rgba(0,0,0,0.1);border-top-right-radius: 20px;border-top-left-radius: 20px;">
				<!-- 	<view @click="tapopen" class="flex-ju-c flex-col">
					<image mode="heightFix" :src="info.isCollection?'/static/bhongxing.png':'/static/cang.png'" class="image height41"></image>
					<view class="size24 bold">收藏</view>
				</view> -->
				<button class="but" @click="customer">

					<view class=" mr50">
						<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
						<view class="size24  color999">客服</view>
					</view>

				</button>

				<view @click="tapcourser(1)" class="bgFE4265 flex-ju-c ra20 height96 colorfff flex1">
					<image mode="widthFix" src="/static/jiesaou.png" class="image width168"></image>

				</view>
			</view>
		</view>
		<add ref="add" @collection="collection" :type="type" :wordId="addrootid"></add>
		<uni-popup ref="uplist" type="bottom" border-radius="20px 20px 0px 0">
			<view class="posire">
				<view class="posiab right30 top30 zindex5" @click="$refs.uplist.close()">
					<image mode="widthFix" src="/static/closes.png" class="image  width65"></image>
				</view>
				<image mode="widthFix" src="/static/topup.png" class="image flex"></image>
				<view class=" posiab top-104 ml30">
					<image mode="widthFix" src="/static/xuexi.png" class="image flex width188"></image>
					<view class="color222 size48 bold">解锁课程</view>
				</view>
			</view>
			<view class="posire bgfff  mt-1">
				<view class="" :style="{paddingBottom:bhh+'px'}">
					<view class="con">
						<view v-show="pindex==1" class="flex-ju-c bold">
							<view @click="tappindex(1)" class="posire size28 width188 height64 mr10 ">
								<image mode="widthFix" src="/static/tabke.png" class="image flex width188"></image>
								<view class="posiab width188 flex-ju-c top5 colorfff">词汇量版</view>
							</view>
							<view @click="tappindex(2)" class="posire size28 width188 height80 ml10">
								<view class="posiab width188 flex-ju-c top5 color222 ra35 borderD8D8D8 height64 ">考试专属版</view>
							</view>
						</view>
						<view v-show="pindex==2" class="flex-ju-c bold">
							<view @click="tappindex(1)" class="posire size28 width188 height80 mr10">
								<view class="posiab width188 flex-ju-c top5 color222 ra35 borderD8D8D8 height64 ">词汇量版</view>
							</view>
							<view @click="tappindex(2)" class="posire size28 width188 height64 ml10 ">
								<image mode="widthFix" src="/static/tabke.png" class="image flex width188"></image>
								<view class="posiab width188 flex-ju-c top5 colorfff">考试专属版</view>
							</view>
						</view>
					
					<!-- 	<view class="bgF9F9F9  height100 ra20 flex-ju-c ">
							<view @click="tappindex(1)" :class="{cactive:pindex==1}"
								class="flex1  height80 flex-ju-c ra20 ml10">词汇量版</view>
							<view @click="tappindex(2)" :class="{cactive:pindex==2}"
								class="flex1 height80 flex-ju-c mr10 ra20">考试专属版</view>
						</view> -->
						
						<scroll-view scroll-y class="height600">
							<nodata v-if="isdata"></nodata>
							<view class="posire  borderEBEFF0 mt20 ra35 height128" :class="{lactive:lindex==k}"
								v-for="(item,k) in courseList" :key="k" @click="taplist(item,k)">
								<image v-if="lindex==k" mode="heightFix" src="/static/cicis.png" class="image flex top-2 posiab height126"></image>
								
								<view class=" flex-ju-b posire  con" :class="{colorfff:lindex==k}">
									<view>
										<view class="size32 bold">{{item.courseName}}</view>
										<view class=" size22 mt5" :class="lindex!=k?'color999':''" >包含{{item.wordCount}}单词，{{item.rootCount}}词根</view>
									</view>
									<view v-if="item.discountPrice>0" class="flex-a-i height128">
										<view class="size24 color666 deleted-text mr10">{{item.originalPrice}}</view>
										<view class="size40 colorFD2F55 bold"><text class="size22 ">￥</text>{{item.discountPrice}}</view>
									</view>
									<view v-else class="flex-a-i height128">
										<view class="size40 colorFD2F55 bold"><text class="size22 ">￥</text>{{item.originalPrice}}</view>
									</view>
								</view>
								
								
								<image v-show="lindex==k" mode="widthFix" src="/static/gou.png"
									style="position: absolute;" class=" image width42  right0 bottom0"></image>
							</view>
						</scroll-view>
					</view>
					<view>
						<view style="border-top-right-radius: 15px;border-top-left-radius: 15px;" class="size26 color666666 ibgFFF7E2-ffffff pt15 pb15 flex-ju-c">购买7天内学习不超过100个单词可以全额退款</view>
						<view class="center flex-ju-b  bgfff  mt10">
							<button class="but" @click="customer">
								<view class="ml50 mr50">
									<image mode="heightFix" src="/static/kkfu.png" class="image height41"></image>
									<view class="size24 bold">客服</view>
								</view>
							</button>

							<view @click="tapcansou"
								class="bg242424 flex-ju-b ra25   colorfff mr30 flex1  ">
								<view class="colorFED6A1 size48 pl30">
									<text class="size23">￥</text>{{oitem.discountPrice?oitem.discountPrice:0}}
								    <text v-if="oitem.originalPrice>0" class="size24 color666 deleted-text mr10">￥{{oitem.originalPrice}}</text>
								</view>
								<image mode="heightFix" src="/static/toujie.png" class="image height96"></image>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ispages: false,
				tapminimg: false,
				arrid: [],
				isdata: false,
				oitem: {
					discountPrice: ""
				},
				wintop: "",
				type: 2,
				courseList: [],
				lindex: -1,
				item: {},
				sindex: 0,
				tindex: 0,
				pindex: 1,
				rootId: "",
				info: {
					seriesWordDos: []
				},
				rootindex: 2,
				images: [],
				atype: "",
				addrootid: "",
				isshow: false,
				note: "",
				nextindex: "",
				warrid: [],
				iscetion: false,
				allheight: 0,
				section0: 0,
				section1: 0,
				section2: 0,
				section3: 0,
				one:-1,
				two:-1,
				videoContext:"",
				srcAudio:""
			}
		},
		onReady() {
		    this.videoContext = uni.createVideoContext('audioId')
		},
		onLoad(option) {
			// var input = `<p><video /><img src=\"\" style=\"max-width:100%;\" data-file-id=\"video-00ff72bdd0df71f0bfb35017f1e80102\"/><img src=\"\" style=\"max-width:100%;\" data-file-id=\"img-d0cf3f9ed0dc71f0ad8f7607c1f70101\"/></p><p>你好啊</p><p><video src=\"\" controls=\"controls\" style=\"max-width:100%\" data-video-id=\"d0a990cdd1ae71f080535107e0c90102\"></video></p>`
			
			// var ccc =''
			
			// const imgTags = this.extractTags(input,['img']);
			 
			// console.log(imgTags,'嘎嘎嘎');
			// var arr =[]
			// let match;
			//  const matches = [];
			//  const idmatches = [];
			 
			// const regex = /data-file-id="([^"]+)"/g;
			// imgTags.map(item=>{
				
			// 	while ((match = regex.exec(item)) !== null) {
					
					
			// 	// idmatches.push(match[1])
				
			// 	if(match[1].indexOf('img-') != -1){
			// 		console.log(match[1],"ppp11")
			// 		let uurl =  match[1].replace('img-','');
					
			// 		this.getimgflie()
					
			// 		this.httpimg([uurl]).then(res=>{
			// 			matches.push(res.data[0])
			// 			 if(matches.length == imgTags.length){
			// 							   matches.map(items=>{
											 
											   
			// 				                    input = this.replaceAll(input,items.fileId +'"', '"'+ 'src="'+ items.fileUrl+'"');
							
			// 				 console.log(input,"ppp");
							 
			// 							   })
			// 			}
						
			// 		})
					
			// 	}else{
			// 		let uurl =  match[1].replace('video-','');
			// 		this.getimgflie()
					
			// 		this.httpimg([uurl],2).then(res=>{
			// 			matches.push(res.data[0])
						
			// 			if(matches.length == imgTags.length){
			// 							   matches.map(items=>{
											 
											   
			// 				                    input = this.replaceAll(input,items.fileId +'"', '"'+ 'src="'+ items.fileUrl+'"');
							
			// 				 console.log(input,"ppp");
							 
			// 							   })
			// 			}
						
			// 		})
			// 	}
				
				
			// 	}
			// })
			
			
			
			
				
					
			// 	  this.httpimg([match[1]],2).then(res=>{
			// 	  	   matches.push(res.data[0])
					   
			// 		   if(matches.length == imgTags.length){
						   
			// 			   matches.map(items=>{
							 
							   
			//                     input = this.replaceAll(input,items.fileId +'"', '"'+ 'src="'+ items.fileUrl+'"');
			
			//  console.log(input,"ppp");
			 
			// 			   })
			// 		   }
			// 	  })
			
			
			
			
			
			
			// const regex = /data-image-id="([^"]+)"/g;
			// const matches = [];
			// let match;
			// while ((match = regex.exec(input)) !== null) {
			//   matches.push(match[1]);
			// }
			// console.log(matches);
			
			
			
			
			
			
			
			
			
			 
			
			this.rootId = option.id
			this.addrootid = option.id
			this.getdata(option.id)
			this.atype = option.type

			if (option.type) {
				this.arrid = option.arrid.split(',')
				this.nextindex = this.arrid.indexOf(this.rootId)
				uni.setStorageSync('record', {
					type: 1,
					rootId: this.rootId
				})
			}
		},
		computed:{
			hee(){
				this.$nextTick(() => {
					setTimeout(() => {
						this.getViewHeight('section').then(res => {
							this.allheight = Math.trunc(res)
						})
						this.getViewHeight('section0').then(res => {
							this.section0 = Math.trunc(res)
						})
						this.getViewHeight('section1').then(res => {
							this.section1 = Math.trunc(res)
						})
						this.getViewHeight('section2').then(res => {
							this.section2 = Math.trunc(res)
						})
						this.getViewHeight('section3').then(res => {
							this.section3 = Math.trunc(res)
						})
						
						
					},100)
				})
				return this.one + this.two
			}
		},
		onShow() {
			if (this.iscetion) {
				this.getdata(this.rootId)
			}
		},
		mounted() {
			this.wintop = uni.getSystemInfoSync().windowTop
		},
		onPageScroll(e) {
			if (e.scrollTop >= this.allheight) {
				this.ispages = true
			} else {
				this.ispages = false
				this.tindex = 0
			}
			if (e.scrollTop >= this.allheight + this.section0) {
				this.tindex = 1
			}
			if (e.scrollTop >= this.allheight + this.section0 + this.section1) {
				this.tindex = 2
			}
			if (e.scrollTop >= this.allheight + this.section0 + this.section1 + this.section2) {
				this.tindex = 3
			}
		},
		methods: {
			getimgflie(){
				
			},
			voice(src){
				this.srcAudio =''
				this.httpimg([src],2).then(res=>{
					 this.srcAudio = res.data[0].fileUrl
				})
			},
			loadedmetadata(){
				this.videoContext.play()
			},
		
			replaceAll(str, search, replacement) {
			  return str.split(search).join(replacement);
			},
			 extractImgTags(html) {
			  const imgReg = /<img.*?(?:>|\/>)/gi;
			  return html.match(imgReg) || [];
			},
			 extractTags(html, tags) {
			  const regex = new RegExp(`<(${tags.join('|')}).*?(?:>|\/>)`, 'gi');
			  return html.match(regex) || [];
			},
			ready(e){
				this.two= new Date().getTime()
			},
			imgload() {
				this.one= new Date().getTime()
			},
			getViewHeight(id) {
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this).select('#' + id)
					query.boundingClientRect((data) => {
						resolve(data.height)
					}).exec()
				})
			},
			unreimg() {
				uni.previewImage({
					urls: [this.info.mindMap],
					showmenu:false
				});
			},
			kaizhan(item) {
				item.isshow = false
			},
			tapatype(item) {
				if (this.atype) {
					uni.navigateTo({
						url: 'detailed?id=' + item.wordId + '&warrid=' + this.warrid
					})
				} else {
					uni.navigateTo({
						url: 'words_detail?id=' + item.wordId
					})
				}
			},
			rootp() {
				this.nextindex--
				if (this.arrid[this.nextindex]) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 200
					});
					this.getdata(this.arrid[this.nextindex])
				} else {
					this.nextindex++
					this.toast('最后一个了')
				}
			},
			rootnext() {
				this.nextindex++
				if (this.arrid[this.nextindex]) {
					this.getdata(this.arrid[this.nextindex])
					uni.setStorageSync('record', {
						type: 1,
						rootId: this.arrid[this.nextindex]
					})
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 200
					});
				} else {
					this.nextindex--
					uni.reLaunch({
						url: "suu"
					})
				}
			},
			againset() {
				
				this.http('/api/userStory/add?rootId=' + this.rootId).then(res => {

					var text = res.data.story.split('(')

					this.info.stories = this.wreplace(this.info.root, text[0])
					this.info.zstories = text[1]
					this.info.storyAudio = res.data.storyAudio
					console.log(this.info.zstories)
				})
			},
			getdata(rootId) {
				this.http('/api/root/info', {
					rootId,
					blindBoxId: ""
				}, 'post').then(res => {
					if (res.data.stories) {
						var text = res.data.stories.split('(')

						res.data.stories = this.wreplace(res.data.root, text[0])
						res.data.zstories = text[1]
					}


					res.data.noteInfoDos.map(item => {
						if (item.note.length > 121) {
							item.isshow = true
						} else {
							item.isshow = false
						}
						if (item.images) {
							item.images = item.images.split(',')
						}
					})
					if (!res.data.seriesWordDos) {
						res.data.seriesWordDos = []
					}
					if (this.atype) {
						var warrid = []
						res.data.seriesWordDos.map(item => {
							warrid.push(item.wordId)
						})
						this.warrid = warrid
					}
					
					
					
					
					
					
					
					
					
					
					var input = res.data.explanation
					const imgTags = this.extractTags(input,['img','video']);
					
					let match;
					 const matches = [];
					 const idmatches = [];
					const regex = /data-file-id="([^"]+)"/g;
					imgTags.map(item=>{
						
						while ((match = regex.exec(item)) !== null) {
							
							
						// idmatches.push(match[1])
						
						if(match[1].indexOf('img-') != -1){
							console.log(match[1],"ppp11")
							let uurl =  match[1].replace('img-','');
							
							this.getimgflie()
							
							this.httpimg([uurl]).then(res=>{
								matches.push(res.data[0])
								 if(matches.length == imgTags.length){
									 
												   matches.map(items=>{
													 
													   
									                    input = this.replaceAll(input,items.fileId +'"', '" '+ 'src="'+ items.fileUrl+'"');
									
									 
												   })
												   this.info.explanation = input
								}
								
							})
							
						}else{
							let uurl =  match[1].replace('video-','');
							this.getimgflie()
							
							this.httpimg([uurl],2).then(res=>{
								matches.push(res.data[0])
								
								if(matches.length == imgTags.length){
												   matches.map(items=>{
													 
													   
									                    input = this.replaceAll(input,items.fileId +'"', '"'+ 'src="'+ items.fileUrl+'"');
														
										
												   })
												   this.info.explanation = input
								}
								
							})
						}
						
						
						}
					})
					
					
					
					
					
						 
					 this.info = res.data
					
					this.httpimg([res.data.imageId]).then(res=>{
						this.info.rootCard = res.data[0].fileUrl
					})

				})

			},
			taplist(item, index) {
				this.lindex = index
				this.oitem = item
			},
			tapcansou() {
				this.info.isUnlock = 1
				if (this.oitem.discountPrice) {
					this.http('/api/orderMain/pay', {
						courseId: this.oitem.courseId
					}).then(res => {
						uni.requestPayment({
							provider: 'weixin',
							orderInfo: 'orderInfo',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.prepayId,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: (res) => {
								this.toast('支付成功')
								this.$refs.uplist.close()
								this.getdata(this.rootId)
							},
							fail: (err) => {
								this.toast('支付失败')
							}
						});
					})
				} else {
					this.toast('选择课程')
				}
			},
			tappindex(index) {
				this.courseList = []
				this.pindex = index
				this.tapcourser(index)
			},
			tapcourser(courseType) {
				this.http('/api/course/toll_course', {
					rootId: this.rootId,
					courseType
				}).then(res => {
					this.courseList = res.data
					this.nodata(this.courseList, this)
					this.$refs.uplist.open()
				})
			},
			tapaddnote() {
				if (this.note) {
					this.http('/api/note/add', {
						isWordOrRoot: 2,
						entryId: this.rootId,
						note: this.note,
						images: this.images
					}, 'post').then(res => {
						this.note = ''
						this.images = []
						this.toast('提交成功，审核中...')
					})
				} else {
					this.toast('输入笔记内容')
				}
			},
			tapclose(index) {
				this.images.splice(index, 1)
			},
			tapupimg() {
				if(this.images.length>8){
					this.toast('最多9张图')
					return
				}
				this.upimg(9).then(res=>{
					res.map(item=>{
						this.images.push(item)
					})
				})
			},
			collection() {
				if (this.type == 1) {
					this.item.isCollection = 1
				} else {
					this.info.isCollection = 1
				}
				this.toast('收藏成功')
			},
			tapaddcang(item, type) {
				if (item.isCollection) {
					this.http('/api/folder_favorite_relation/cancel', {
						type,
						entryId: item.wordId ? item.wordId : item.noteId
					}).then(res => {
						this.toast('已取消')
						item.isCollection = 0
					})
				} else {
					this.http('/api/folder_favorite_relation/add', {
						favoriteType: type,
						entryId: item.wordId ? item.wordId : item.noteId
					}, 'post').then(res => {
						this.toast('收藏成功')
						item.isCollection = 1
					})
				}

			},
			taproots(index) {
				this.rootindex = index
				this.getViewHeight('section1').then(res => {
					this.section1 = res
				})

			},


			tapttype(index) {
				// this.tindex = index

				if (index == 1) {
					this.scrollTops = this.allheight + this.section0
				} else if (index == 2) {
					this.scrollTops = this.allheight + this.section0 + this.section1
				} else if (index == 3) {
					this.scrollTops = this.allheight + this.section0 + this.section1 + this.section2
				} else {
					this.getViewHeight('section').then(res => {
						this.scrollTops = res
					})
				}

				setTimeout(() => {
					this.scrollToSection1(index)
				}, 30)
			},
			swchange(e) {
				this.sindex = e.detail.current
			},
			scrollToSection1(index) {
				uni.pageScrollTo({
					duration: 200,
					scrollTop: this.scrollTops
				});
			},
			tapcang(item) {

				if (item.isCollection == 1) {
					this.http('/api/folder_favorite_relation/cancel', {
						entryId: item.wordId,
						type: 1
					}).then(res => {
						this.toast('已取消')
						item.isCollection = 0
					})
				} else {
					this.type = 1
					this.item = item
					this.addrootid = item.wordId

					setTimeout(() => {
						this.$refs.add.open(1)
					}, 10)
				}
			},
			tapopen() {
				if (this.info.isCollection == 1) {
					this.http('/api/folder_favorite_relation/cancel', {
						entryId: this.rootId,
						type: 2
					}).then(res => {
						this.toast('已取消')
						this.info.isCollection = 0
						var pages = getCurrentPages();
						var page = pages[pages.length - 2];
						page.$vm.isxin = true
					})
				} else {
					this.addrootid = this.rootId
					this.type = 2
					setTimeout(() => {
						this.$refs.add.open(1)
					}, 10)
				}
			},
		}
	}
</script>

<style>
	.fixd {
		width: 92%;
		position: fixed;
		top: 0;
		background: #fff;
		z-index: 10;
	}

	.lactive {
		border:2px solid #FD2F55;
		background: #FFF3F5;
	}

	.fith {
		-webkit-line-clamp: 5;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-align: start;
		-webkit-box-orient: vertical;
	}

	.transition {
		transition: all 0.5s;
		transform: scale(0.8);
	}

	.scale {
		transform: scale(1);
	}

	.active {
		color: #000;
		font-weight: bold;
	}

	.cactive {
		background: #fff;
	}

	uni-button:after {
		margin: 0;
		line-height: normal;
		padding: 0;
		border: none;
		background: none;
	}

	button::after {
		margin: 0;
		line-height: normal;
		padding: 0;
		border: none;
		background: none;
	}

	button {
		line-height: normal;
		margin: 0;
		padding: 0;
		border: none;
		background: none;
	}

	.but {
		margin: 0;
		line-height: normal;
		padding: 0;
		border: none;
		background: none;
	}
</style>